import { ref, watch } from "vue";

export default function useModelTitle(
  initValue: string,
  emitFn: any,
  modifiers: any
) {
  const title = ref(initValue);

  watch(
    () => title.value,
    (newVal: string) => {
      title.value = newVal;
    }
  );

  const handleTextChange = (e: Event) => {
    let value = (e.target as HTMLInputElement).value;
    if (modifiers?.trim) {
      value = value.trim();
    }
    title.value = value;
    emitFn(title.value);
  };

  return {
    title,
    handleTextChange,
  };
}
